<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>31-背景新增属性+渐变-2</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			p{
				font-size:20px;
				text-align:center;
				background-image:linear-gradient(45deg,yellow,red,green,yellow,pink,blue);
				animation:p 3s linear infinite forwards;
			}
			@keyframes p{
				0%{
					color:#ffffcc;
				}
				25%{
					color:#0066ff;
				}
				50%{
					color:#66cc00;
				}
				75%{
					color:#cc3300;
				}
				100%{
					color:#ff3366;
				}
			}
			.box{
				width: 300px;
				height:150px;
				margin:20px auto;
				background:#fff;
				border:1px solid #111;
				border-radius:50%;
				animation:box 3s linear infinite forwards;
			}
			@keyframes box{
				0%{
					background:#fff;
				}
				25%{
					background:rgba(0,123,24,.5);
				}
				50%{
					background:rgba(0,123,0,.5);
				}
				75%{
					background:rgba(123,123,0.,5);
				}
				100%{
					background:#fff;
				}
			}
			.box .wrap-box{
				position:relative;
				width:120px;
				height:120px;
				margin:15px 84px;
				animation:wrap-box 3s linear infinite forwards;
			}
			@keyframes wrap-box{
				100%{
					transform:rotate(360deg);
				}
			}
			.box .box1{
				position:absolute;
				top:20px;
				left:20px;
				width:80px;
				height:80px;
				border:1px solid #111;
				border-radius:50%;
				background:repeating-radial-gradient(black 5px,red 10px);
				z-index:2;
			}
			.box .box2{
				position:absolute;
				top:48px;
				left:0px;
				width:100px;
				height:25px;
				background:#111;
				border-radius:50%;
			}
			.box .box3{
				position:absolute;
				top:42px;
				left:20px;
				width:100px;
				height:25px;
				background:#111;
				border-radius:50%;
				transform:rotate(140deg);
			}
			.box .box4{
				position:absolute;
				top:60px;
				left:12px;
				width:100px;
				height:25px;
				background:#111;
				border-radius:50%;
				transform:rotate(250deg);
			}
		</style>
	</head>
	<body>
			<p>写轮眼</p>
			<div class="box">
				<div class="wrap-box">
					<div class="box1"></div>
					<div class="box2"></div>
					<div class="box3"></div>
					<div class="box4"></div>
				</div>
			</div>
		
		
	</body>
</html>
